<template>
  <view
    class="content"
    :style="{
      'padding-top': height + 'px',
    }"
  >
    <view
      :style="{
        height: statusBarHeight + 'px',
      }"
    >
    </view>
    <view
      class="head"
      :style="{
        top: statusBarHeight + 'px',
      }"
    >
      <view class="head_left">
        <u-icon
          name="arrow-left"
          color="#444444"
          size="24"
          :bold="true"
          @click="toBack"
        ></u-icon>
      </view>
      <view class="text">设置</view>
      <view class="head_right"> </view>
    </view>

    <view class="box">
      <view class="item" @click="goPhone(phone)">
        <view class="item_title">{{ email_or_phone_text }}</view>
        <view class="item_right">
          <u-icon name="arrow-right" color="#444444" size="15"></u-icon>
          <view>{{ phone }}</view>
        </view>
      </view>
      <view class="item" @click="goPwd">
        <view class="item_title">修改密码</view>
        <view class="item_right">
          <u-icon name="arrow-right" color="#444444" size="15"></u-icon>
          <view></view>
        </view>
      </view>
      <view class="item" @click="goPaymentPwd">
        <view class="item_title">修改支付密码</view>
        <view class="item_right">
          <u-icon name="arrow-right" color="#444444" size="15"></u-icon>
          <view></view>
        </view>
      </view>
      <view class="item" @click="goAgree">
        <view class="item_title">用户服务协议</view>
        <view class="item_right">
          <u-icon name="arrow-right" color="#444444" size="15"></u-icon>
          <view></view>
        </view>
      </view>
      <view class="item" @click="goPolicy">
        <view class="item_title">隐私政策</view>
        <view class="item_right">
          <u-icon name="arrow-right" color="#444444" size="15"></u-icon>
          <view></view>
        </view>
      </view>
      <view class="item" @click="goWe">
        <view class="item_title">关于我们</view>
        <view class="item_right">
          <u-icon name="arrow-right" color="#444444" size="15"></u-icon>
          <view></view>
        </view>
      </view>
      <view class="item" @click="clearFn">
        <view class="item_title">清除缓存</view>
        <view class="item_right">
          <u-icon name="arrow-right" color="#444444" size="15"></u-icon>
          <view>{{ storageSize }}</view>
        </view>
      </view>
      <view class="item" @click="gologOff">
        <view class="item_title">注销账号</view>
        <view class="item_right">
          <u-icon name="arrow-right" color="#444444" size="15"></u-icon>
          <view></view>
        </view>
      </view>
      <view class="item">
        <view class="item_title">版本</view>
        <view class="item_right">
          <!-- <u-icon name="arrow-right" color="#444444" size="15"></u-icon> -->
          <view>{{ appVersion }}</view>
        </view>
      </view>

      <view class="btn">
        <view class="box_btn" @click="exit"> 退出登录 </view>
      </view>
    </view>

    <floatingBall></floatingBall>
  </view>
</template>

<script>
import selectType from "@/components/selectType.vue";
import storage from "@/common/storage.js"; // 缓存封装
export default {
  components: {
    selectType,
  },
  data() {
    return {
      statusBarHeight: 0,
      height: 0,
      phone: "",
      storageSize: "",
      email_or_phone: "",
      email_or_phone_text: "修改手机号",
      pay_password: "",
    };
  },

  created() {
    const statusBarHeight = uni.getSystemInfoSync(); // 获取手机状态栏高度

    this.statusBarHeight = statusBarHeight.statusBarHeight;
    this.$nextTick(() => {
      uni
        .createSelectorQuery()
        .select(".head")
        .boundingClientRect((data) => {
          this.height = data.height;
        })
        .exec();
    });

    // this.getMyList()
  },
  onShow() {
    this.getMyList();
    this.getStorageSize();
    this.appVersion = uni.getSystemInfoSync().appVersion; // 版本号
  },
  methods: {
    goPhone(phone) {
      uni.navigateTo({
        url: `/pages/setUp/phone?phone=${phone}&email_or_phone=${this.email_or_phone}`,
      });
    },
    goPwd() {
      uni.navigateTo({
        url: `/pages/setUp/changePwd?email_or_phone=${this.email_or_phone}`,
      });
    },
    goPaymentPwd() {
      uni.navigateTo({
        url: `/pages/setUp/changePayment?email_or_phone=${this.email_or_phone}`,
      });
    },
    goAgree() {
      uni.navigateTo({
        url: "/pages/setUp/agreement",
      });
    },
    goPolicy() {
      uni.navigateTo({
        url: "/pages/setUp/policy",
      });
    },
    goWe() {
      uni.navigateTo({
        url: "/pages/setUp/we",
      });
    },
    gologOff() {
      uni.navigateTo({
        url: "/pages/setUp/logOff",
      });
    },
    toBack() {
      uni.navigateBack({
        delta: 1,
      });
    },
    // 获取我的数据
    getMyList() {
      this.$http
        .userInfo({})
        .then((res) => {
          console.log(res.data, "获取我的数据");
          this.phone = res.data.userInfo.phone.replace(
            /(\d{3})\d{4}(\d{4})/,
            "$1****$2"
          );
          this.email_or_phone = res.data.userInfo.email_or_phone;
          // 支付密码
          this.pay_password = res.data.userInfo.pay_password;
          this.email_or_phone_text =
            res.data.userInfo.email_or_phone == 1 ? "修改手机号码" : "修改邮箱";
        })
        .catch((error) => {
          console.log(error, "错误");
          uni.$u.toast(error);
        });
    },
    // 获取缓存
    getStorageSize() {
      let that = this;
      uni.getStorageInfo({
        success(res) {
          console.log(res, "缓存信息");
          let size = res.currentSize;
          console.log(that.storageSize, 22222222222222);

          if (size < 1024) {
            that.storageSize = size + "B";
          } else if (size / 1024 >= 1 && size / 1024 / 1024 < 1) {
            that.storageSize = Math.floor((size / 1024) * 100) / 100 + " KB";
          } else if (size / 1024 / 1024 >= 1) {
            that.storageSize =
              Math.floor((size / 1024 / 1024) * 100) / 100 + " M";
          }
          console.log(that.storageSize, 1111111);
        },
      });
    },
    // 清除缓存
    clearFn() {
      let that = this;
      uni.showModal({
        title: "提示",
        content: "确定清除缓存吗?",
        confirmText: "立即清除",
        success(res) {
          if (res.confirm) {
            let token = storage.get("token");
            uni.clearStorageSync();
            storage.set("token", token);
            // //重新获取并显示清除后的缓存大小
            that.getStorageSize();
            uni.showToast({
              title: "清除成功",
            });
          }
        },
      });
    },
    exit() {
      this.$http
        .userLogout({})
        .then((res) => {
          console.log(res.message, "退出");
          uni.$u.toast(res.message);
          storage.remove("token");
          setTimeout(() => {
            uni.reLaunch({
              url: "/pages/login/index",
            });
          }, 1000);
        })
        .catch((error) => {
          console.log(error, "错误");
          uni.$u.toast(error);
        });
    },
  },
};
</script>

<style scoped lang="scss">
.content {
  box-sizing: border-box;
}
.head {
  width: 100%;
  padding: 18rpx 30rpx 47rpx;
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  z-index: 99;
  background: #fff;

  .head_left {
    position: absolute;
    left: 30rpx;
  }

  .head_right {
    position: absolute;
    right: 30rpx;
    display: flex;
  }

  .text {
    font-size: 36rpx;
    font-family: PingFang SC-Bold, PingFang SC;
    font-weight: 400;
    color: #444444;
  }
}
.box {
  padding: 32rpx 30rpx;
  .item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 32rpx 0;
    .item_title {
      font-size: 32rpx;
      color: #444444;
    }
    .item_right {
      display: flex;
      flex-direction: row-reverse;
      color: #888888;
      font-size: 32rpx;
      view {
        margin-right: 14rpx;
      }
    }
  }
  .btn {
    width: 100%;
    padding: 0 30rpx;
    box-sizing: border-box;
    position: fixed;
    bottom: 0;
    left: 0;
    .box_btn {
      width: 100%;
      height: 96rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      background: linear-gradient(360deg, #50b674 0%, #aeddbd 100%);
      border-radius: 48rpx;
      font-size: 30rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      color: #ffffff;
      margin-bottom: 88rpx;
    }
  }
}
</style>
